<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: "标题文字",
  },
  desc: {
    type: String,
    default: "TITLE",
  },
  show: {
    type: Boolean,
    default: true,
  },
});
// const { title, show, desc } = toRefs(props)
</script>

<template>
  <div class="title-box">
    <div class="text" :class="[show ? 'mb-2' : 'mb-4']">
      <div class="text-ellipsis">
        <span class="title">{{ title }}</span>
      </div>
      <div class="desc text-ellipsis">{{ desc }}</div>
    </div>
    <div class="line">
      <div class="block" v-show="show"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title-box {
  min-width: 1440px;
  padding-top: 55px;
  text-align: center;

  .title {
    font-size: 24px;
    background: linear-gradient(to right, #252086 0%, #e60012 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .desc {
    font-size: 12px;
    color: #9195a3;
  }

  .line {
    position: relative;
    height: 1px;
    background-color: #c6c6c6;
  }

  .block {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 74px;
    height: 4px;
    transform: translate(-50%, -50%);
    background-color: #9195a3;
  }
}
</style>
